<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素的滚动操作</title>
    <style>
        .Main{
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        .text{
            overflow: auto;
            width: 60%;
            height: 80px;
            border: 1px solid green;
        }
        button{
            width: auto;
            height: 30px;
        }
        #te{
            overflow-y: scroll;
            width: 60%;
            height: 80px;
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <h1>当元素内容超过元素本身的大小时，可以通过设置overflow：auto设置样式允许出现滚动条</h1>
    <h2>以下是对于滚动条的操作</h2>
    <div>
        <ul>
            <li>scrollLeft:获取或设置元素被“卷去”的左侧距离</li>
            <li>scrollTop:获取或设置元素被“卷去”的上方距离</li>
            <li>scrollWidth:获取元素内容的完整宽度，不含边框</li>
            <li>scrollHeight:获取元素内容的完整高度，不含边框</li>
        </ul>
    </div>

    <div class="Main">
        <div class="text">
            123123456789123456789123456782345678902345678902345678912345671234567u8
        </div>
        <button class="inText">手动输入文字</button>
        <div id="te">
            12<br>
            12<br>
            12<br>
            12<br>
            12<br>
        </div>
<!--        <button class="inText">手动输入文字</button>-->
        <div class="dv">-没有滚动-</div>
        <div class="dv">-没有滚动-</div>
        <div class="dv">--</div>
        <div class="dv">--</div>
    </div>

<script>
    var text=document.querySelector('.text');
    var text2=document.querySelector('#te');
    var inText=document.querySelectorAll('button');
    var dv=document.querySelectorAll('.dv');
    inText[0].addEventListener('click',function (){
        text.innerText=prompt();
    })
    // inText[1].addEventListener('click',function (){
    //     text2.innerText=prompt();
    // })
    text.addEventListener('scroll',function (){
        dv[0].innerText='获取元素被‘卷去’的左侧距离:'+text.scrollLeft;
        dv[2].innerText='获取元素内容的完整宽度:'+text.scrollWidth;
    })
    text2.addEventListener('scroll',function (){
        dv[1].innerText='获取元素被‘卷去’的上方距离'+text2.scrollTop;
        dv[3].innerText='获取元素内容的完整高度:'+text.scrollHeight;
    })


</script>
</body>
</html>